<template>
  <div class="user-container">
    <div class="header">
      <HeaderView></HeaderView>
      <div class="avatar-container">
        <div class="avatar"></div>
        <div class="username">张三</div>
      </div>
    </div>

    <div class="header-nav">
      <ul class="nav">
        <li
          v-for="(item, index) in navlist"
          :key="index"
          @click="jump(item)"
        >
          <img :src="item.icon" alt="" />
          <p class="navname">{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderView from "@/components/HeaderView";
export default {
  components: { HeaderView },
  data() {
    return {
      navlist: [
        {
          icon: require("./images/allorder.png"),
          name: "我的订单",
          path: "",
        },
        {
          icon: require("./images/coupons.png"),
          name: "优惠券",
          path: "",
        },

        {
          icon: require("./images/footprint.png"),
          name: "我的足迹",
          path: "",
        },
        {
          icon: require("./images/collect.png"),
          name: "收藏",
          path: "/user/collection",
        },
        {
          icon: require("./images/address.png"),
          name: "地址管理",
          path: "/user/address",
        },
        {
          icon: require("./images/Service.png"),
          name: "联系客服",
        },
        {
          icon: require("./images/help.png"),
          name: "帮助中心",
        },
        {
          icon: require("./images/feedback.png"),
          name: "意见反馈",
          path: "/user/feedback",
        },
      ],
    };
  },
  methods: {
    jump(item) {
      const routeName = ["地址管理", "我的订单", "意见反馈", "收藏"];
      if (routeName.includes(item.name)) {
        this.$router.push(item.path);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.user-container {
  .header {
    height: 379px;
    background-image: linear-gradient(179deg, #191919 0%, #595959 100%);
    color: #fff;
    ::v-deep .header-container[data-v-84e23df6] {
      background-color: transparent;
      path {
        fill: #fff;
        background-color: #fff;
        stroke: #fff;
        color: #fff;
      }
    }
    .avatar-container {
      padding: 0 0 0 35px;
      display: flex;
      align-items: center;
      .avatar {
        width: 145px;
        height: 145px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 35px;
      }
      .username {
        font-size: 28px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }

  .header-nav {
    background-color: #f8f8f8;
    padding: 34px 20px 0 20px;
    .nav {
      background-color: #fff;
      padding: 43px 36px 46px 36px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 368px;
      align-content: space-between;
      li {
        width: 150px;
        text-align: center;
      }
      img {
        width: 58px;
        height: 58px;
        margin-bottom: 9px;
      }
      .navname {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
}
</style>
